<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title><style>
        .game{
            width: 100%;
            height: 320px;
            text-align: center;
            margin-top: 0 auto; 
        }
        .turntable{
            width: 310px;
            height: 320px;
            margin-top: 0 auto;
        }
        .gift{
            width: 100px;
            height: 100px;
            border: 1px solid yellowgreen;
            float: left;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
            background-color: yellow;
            color: mediumpurple;
        }
        .gift:nth-child(5){
            background-color: transparent;
        }
        .start{
            width: 80%;
            display: inline-block;
            margin-top: 15px;
            margin-bottom: 10px;
            vertical-align: middle;
            color: rgb(255, 255, 255);
            background-color: rgb(219, 47, 235);
            text-align: center;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
            font-family: 微软雅黑;
            border-width: initial;
            border-style: none;
            border-color: initial;
            border-image: initial;
            outline: 0px;
            padding: 8px 18px;
            overflow: hidden;
            text-decoration: none;
            transition: all 0.2s ease-out 0s;
            border-radius: 2px;
        }
        .selected{
            border:1px solid transparent;
            box-shadow: 0 0 5px 2px red;
            position:relative;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="game" >
		<div class="turntable"style="position: absolute;left: 50%;transform:translateX(-50%)"  >
			<div class="gift">一条毛巾</div>
			<div class="gift">随机金额红包</div>
			<div class="gift">一个杯子</div>
			<div class="gift">谢谢参与</div>
			<div class="gift"></div>
			<div class="gift">一支牙膏</div>
			<div class="gift">一支牙刷</div>
			<div class="gift">50优惠券</div>
			<div class="gift">25优惠券</div>
			<button type="button" class="start" onclick="start()">我要礼物</button>
        </div>
	</div>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>  

<script>
	var gift;
	var x=0;
	var ArrList=[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]; 
	var position=[0,1,2,5,8,7,6,3];
	var money=[1.88,5.20,6.66,8.88,13.14,66.66,88.88,99.99,100];

	function start(){
		var initial=getArrayItems(ArrList,1);
		for (var i = 0; i < initial; i++) {
			setTimeout(()=>{
				$('.gift').removeClass("selected");
				gift=$('.gift:eq('+ position[(x%8)] +')');
				gift.addClass('selected');
				x++;
				if (x==initial) {setTimeout(()=>{
					if (position[(x%8)]==2) {
						randmoney();
					}else{
						alert('恭喜获得礼物：'+gift.text());
					}
					console.log(position[(x%8)]);
					x=0;
				},10)}
			},i*150);
		}
	}

	function randmoney(){
		for (var i = 0; i < 15; i++) {
			setTimeout(()=>{
				$('.gift:eq(1)').text(getArrayItems(money,1));
				x++;
				if (x==15) {x=0;setTimeout(()=>{
                    console.log($('.gift:eq(1)').text()+"元");
					alert('恭喜获得红包：'+$('.gift:eq(1)').text()+"元");
					$('.gift:eq(1)').text('随机金额红包');
				},1)}
			},i*100);

		};
	}

	function getArrayItems(arr, num) {
	    var temp_array = new Array();
	    for (var index in arr) {
	        temp_array.push(arr[index]);
	    }
	    var return_array = new Array();
	    for (var i = 0; i<num; i++) {
	        if (temp_array.length>0) {
	            var arrIndex = Math.floor(Math.random()*temp_array.length);
	            return_array[i] = temp_array[arrIndex];
	            temp_array.splice(arrIndex, 1);
	        } else {
	            break;
	        }
	    }
	    return return_array;
	}
</script>
</body>
</html>